<!--
 * @Author: wei_sc2@ecidi.com
 * @Date: 2020-12-23 09:06:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-10 09:04:03
 * @Description: 重定向路由选择
 -->
<template>
  <div ref="reference">
    <fks-popover
      ref="popover"
      placement="bottom"
      :width="inputWidth"
      :trigger="readonly ? 'manual' : 'click'"
      @show="visible = true"
      @hide="visible = false"
    >
      <fks-tree
        ref="tree"
        :data="routes"
        :props="props"
        style="max-height: 200px; overflow: auto;"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        @node-click="handleClick"
      >
        <span slot-scope="{ data }">{{ LANG[data.title] || data.title }}</span>
      </fks-tree>
    </fks-popover>
    <fks-input
      v-model="text"
      v-popover:popover
      clearable
      maxlength="50"
      :suffix-icon="visible ? 'fks-icon-arrow-up' : 'fks-icon-arrow-down'"
      style="cursor: pointer;"
      :placeholder="LANG.SELECT_HOLDER"
      @clear="clear"
    />
  </div>
</template>

<script type="text/ecmascript-6">
import {
  addResizeListener,
  removeResizeListener
} from 'fawkes-lib/lib/utils/resize-event'
import path from 'path'
export default {
  name: 'MenuSelect',
  props: {
    parentId: {
      type: String
    },
    pathId: {
      type: String
    },
    redirect: {
      type: String
    },
    id: {
      type: String
    },
    readonly: Boolean
  },
  data() {
    return {
      visible: false,
      props: {
        label: 'title',
        children: 'children'
      },
      inputWidth: '310',
      text: ''
    }
  },
  computed: {
    routes() {
      let routes = JSON.parse(JSON.stringify(this.$store.state.routes))
      this.initPath(routes)
      return routes
    },
    portal() {
      return this.$store.state.portal
    }
  },
  watch: {
    keywords(val) {
      this.$refs.tree.filter(val)
    },
    text: {
      immediate: true,
      handler: function (val) {
        if (!val) {
          this.$emit('update:redirect', '')
        } else {
          this.$emit('update:redirect', val)
        }
      }
    }
  },
  mounted() {
    //监听resize事件，改变选择框宽度
    this.text = this.redirect
    this.$nextTick(() => {
      const reference = this.$refs.reference
      addResizeListener(reference, this.handleResize)
      this.handleResize()
    })
  },
  beforeDestroy() {
    const reference = this.$refs.reference
    removeResizeListener(reference, this.handleResize)
  },
  methods: {
    /**
     * @description:遍历树形路由，处理菜单path
     * @param {Array} 所有路由
     * @param {String} basePath
     * @return: Array
     */
    initPath(routes, basePath = '/') {
      routes.forEach((route) => {
        route.path = path.resolve(basePath, route.path)
        if (route.children) {
          this.initPath(route.children, route.path)
        }
      })
    },
    /**
     * @description: 点击节点
     * @param {type}
     * @return:
     */
    handleClick(data, node) {
      this.text = this.getCurrentNode(this.routes, data.path)
      this.$emit('update:redirect', data.path)
      this.$refs.popover.doClose()
    },
    /**
     * @description: 获取选中文本
     * @param {type}
     * @return:
     */
    getCurrentNode(arr, val, res = []) {
      arr.forEach((item) => {
        if (item.path == val) {
          res.push(item)
        } else if (item.children) {
          this.getCurrentNode(item.children, val, res)
        }
      })
      return res.length > 0 ? res[0].path : ''
    },
    /**
     * @description: 树节点过滤
     * @param {type}
     * @return:
     */
    filterNode(value, data) {
      if (!value) return true
      return (data.path || data.path).indexOf(value) !== -1
    },
    /**
     * @description: 宽度resize
     * @param {type}
     * @return:
     */

    handleResize() {
      this.$nextTick(() => {
        let reference = this.$refs.reference
        this.inputWidth = Math.max(
          reference.getBoundingClientRect().width - 20,
          200
        )
      })
    },
    clear() {
      this.$emit('update:redirect', '')
      this.text = ''
    }
  }
}
</script>

<style scoped>
</style>
